<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/text.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
</head>
<body bgcolor="">
<!--轮播图片-->
<div class="layui-carousel" id="test1">
    <div carousel-item="">
        <div><img src="image/lun.jpg" width="100%" height="100%"/></div>
        <div><img src="image/lun2.jpg" width="100%" height="100%"/></div>
        <div><img src="image/13.jpg" width="100%" height="120%"/></div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title">
    <legend>
        <span class="" style="font-size: 14px">
            <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
            <span>公告<span class="layui-box">&gt;</span></span>
            <span>公告查看<span class="layui-box">&gt;</span></span>
        </span>
    </legend>
</fieldset>


<div class="t">
    <div class="" id="layerDemo" style="margin-bottom: 0;">
        <table class="layui-table" lay-skin="line">
            <tbody class="tips"></tbody>

        </table>
    </div>
</div>


<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        $.get('/dor/text', function (data) {
            var htmls = []
            data.forEach(function (item, index) {
                /*var html = '<div style="display: flex; align-items: center;"><blockquote class="layui-elem-quote" style="width: 600px;">' +
                 item.time+'：' + item.title +
                 '</blockquote>' +
                 '<button data-method="notice" style="margin-left: 20px;" class="layui-btn" data-index="'+ index + '">查看详情</button></div>'*/

                var demo = '<tr>' +
                    '<td align="left" ><a href="#" class="check-button" data-method="notice" style="margin-left: 20px;" data-index="' + index + '">'
                    + item.title +
                    '</a></td><td>'
                    + item.time +
                    '</td></tr>'

                htmls.push(demo)


            })
            $('.tips').html(htmls.join(''))
            layui.use('layer', function () { //独立版的layer无需执行这一句
                var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

                //触发事件
                var active = {
                    notice: function (othis) {
                        var index = othis.data('index')
                        var contnet = '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' + data[index].context + '</div>'
                        //示范一个公告层
                        layer.open({
                            type: 1
                            , title: false //不显示标题栏
                            , closeBtn: false
                            , area: '600px;'
                            , shade: 0.8
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['我知道了']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: contnet
                        });
                    }
                };
                $('#layerDemo .check-button').on('click', function () {
                    var othis = $(this), method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                });
            })
        })
    })
    //轮播
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , width: '1080px'
            , height: '150px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

</body>
</html>